<!DOCTYPE html>
<html lang="en">
  <head>
    <title>crayon - points example</title>
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="my-canvas" width="400" height="100"></canvas>

    <script src="../crayon.min.js"></script>
    <script>

      var canvas = new crayon.Canvas({ id: "my-canvas" });

      var i, circle, line, point, points = [];

      // Create a custom shape that will be our wave
      var shape = new crayon.CustomShape({
        fill: false,
        stroke: 2,
        strokeColor: '#f00',
        z: 1
      });

      // we need 38 points for it (sparing 10 pixels for margins)
      for(i=0; i<38; i++){
        // first we define our point, half a pixel on x axis is to make sure vertical lines are sharp
        point = new crayon.Point(10.5 + i * 10, 50);
        points.push(point);

        // if it's first point then move to it, otherwise draw a line
        if(i === 0){
          shape.moveTo(point);
        }else{
          shape.lineTo(point);
        }

        // this will be a line coming from the center axis to the wave
        line = new crayon.CustomShape({
          fill: false,
          stroke: 1,
          strokeColor: '#000'
        })
        line.moveTo(10.5 + i * 10, 50);
        line.lineTo(point); // add same point!

        canvas.add(line);

        // last but not least, we draw a circle on each point
        circle = new crayon.Circle({
          position: point, // yes, same point again!
          color: '#fff',
          stroke: 2,
          strokeColor: '#f00',
          radius: 2,
          z: 2
        })

        canvas.add(circle);
      }

      canvas.add(shape);

      // the magic happens here!
      crayon.timer.on('frame', function(time) {
        var t = time / 1000;
        var sin, point;

        for(i=0; i<38; i++){
          point = points[i];

          // each point is getting moved a bit
          sin = Math.sin(t * 2 + i / 4);

          point.move(null, 50 + sin * 40);
        }
      });

    </script>
  </body>
</html>